<%--
  Created by IntelliJ IDEA.
  User: vortex
  Date: 2020/05/05
  Time: 18:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>修改账号信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/oksub.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/loading/okLoading.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/editUser.js"></script>

</head>
<body>
<div class="ok-body">
    <form class="layui-form ok-form" lay-filter="editUser" >
        <div class="layui-form-item">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="text" name="id" placeholder="ID" autocomplete="off" class="layui-input"
                       lay-verify="required" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-block">
                <input type="text" name="account" placeholder="请输入账号" autocomplete="off" class="layui-input"
                       lay-verify="required" disabled>
            </div>
        </div>
    <%--
        <div class="layui-form-item">
            <label class="layui-form-label">旧密码</label>
            <div class="layui-input-block">
                <input type="password" name="password-old" id="password-old" placeholder="请输入旧密码" autocomplete="off" class="layui-input"
                       lay-verify="required|password">
            </div>
        </div>
    --%>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="password-new" id="password-new" placeholder="请输入新密码" autocomplete="off" class="layui-input"
                       lay-verify="required|password">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="password-verify" id="password-verify" placeholder="请再次输入新密码" autocomplete="off" class="layui-input"
                       lay-verify="required|confirmPass">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"
                       lay-verify="required|username">
            </div>
        </div>
<%--

        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px" >是否为管理员</label>
            <div class="layui-input-block">
                <input type="checkbox" name="roleId" lay-skin="switch" lay-text="是|否">
            </div>
        </div>
--%>

        <div class="layui-form-item">
            <label class="layui-form-label">身份</label>
            <div class="layui-input-block">
                <input type="radio" name="roleId" value="1" title="用户" checked >
                <input type="radio" name="roleId" value="2" title="管理员" >
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="${pageContext.request.contextPath}/static/lib/layui/layui.js"></script>
<script type="text/javascript">

    let initData;

    function initForm(data) {
        let jsonString = JSON.stringify(data);
        initData = JSON.parse(jsonString);
        console.log(initData);

    }

    layui.use(["element","jquery", "form", "laydate", "okLayer", "okUtils"], function () {
        let form = layui.form;
        let laydate = layui.laydate;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let $ = layui.jquery;

        okLoading.close($);

        console.log("initData:" + initData);

        form.val("editUser",initData);

        form.on("submit(edit)", function (data){

            okUtils.ajax("/user/edit", "post", data.field, true).done(function (response) {

                okLayer.greenTickMsg(response.content, function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            }).fail(function (error) {
                console.log(error)
            });
            return false;
        });

        /**
         * 数据校验
         */
        form.verify({
            password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],

            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }

        });

        // 校验两次密码是否一致
        form.verify({
            confirmPass:function(value){
                if($('input[name=password-new]').val() !== value)
                    return '两次密码输入不一致！';
            }
        });



    });


</script>

</body>
</html>
